<template>
	<view>
		<view class="bg">
			<view class="detail">
				<view class="price">
					<text>¥20000</text>
				</view>
				<view class="amount">
					<text>订单总金额</text>
				</view>
			</view>
		</view>
		<view class="c1">
			<text>资金密码</text>
			<input :type = type  value=""  class="inp"/>
			<u-icon :name = icon class="icon"></u-icon>
	  </view>
		<view class="confirm">
			<text>确定</text>
		</view>
		<view class="cancel">
			<text>取消</text>
		</view>
	</view>
</template>

<script>
	export default {
	   data() {
				return {
				  type: "password",
					icon: "eye-off"
				}
			},
		methods:{
			changeIcon(){
				if(this.type = "password" ){
					this.icon = "eye"
					this.type = "text"
				}else{
					this.icon = "eye-off"
					this.type = "password"
				}
			}
		 }
		}
</script>

<style lang="scss" scoped>
	.bg{
		width: 90%;
		margin: 5%;
		height: 260rpx;
		background-color: #fafafa;
		border-radius: 10rpx;
		position: relative;
	}
	
	.bg .price {
		text-align: center;
		font-size: 48rpx;
		font-weight: 700;
		color: #c6100e;
	}
	
	.bg .amount {
		text-align: center;
		font-size: 28rpx;
	}
	
	.bg .detail {
		position: absolute;
		top: 60rpx;
		left: 280rpx;
	}
	
	.c1 {
		display: flex;
		justify-content: space-between;
    width: 90%;
		margin: 5%;
		height: 72rpx;
		position: relative;
	}
	
	.c1 text {
		width: 20%;
	}
	.c1 .inp {
		width: 80%;
		border: 2rpx solid #999999;
		margin-left: 60rpx;
		height: 65rpx;
		border-radius: 50rpx;
		margin-top: -5rpx;
		padding-left: 20rpx;
	}
	
	.c1 .icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
    right: 30rpx;
		top: 10rpx;
	}
	
	.confirm {
		text-align: center;
		height: 88rpx;
		background-color: #c6100e;
		color: #FFFFFF;
		line-height: 88rpx;
		border-radius: 40rpx;
		width: 90%;
		margin: 5%;
		margin-top: 60rpx;
	}
	
	.cancel {
		text-align: center;
		height: 88rpx;
		color: #999999;
		line-height: 88rpx;
		width: 90%;
		margin: 5%;
		margin-top: -30rpx;
	}
</style>
